<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的购物车 - 企业培训平台</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        /* Add your specific styles for student-cart here */
        .cart-items {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .cart-item-card {
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .cart-item-card h3 {
            margin-top: 0;
            color: #007bff;
        }
        .cart-item-card p {
            color: #666;
            font-size: 0.9em;
        }
        .total-price {
            margin-top: 30px;
            font-size: 1.2em;
            font-weight: bold;
            text-align: right;
            display: flex; /* 使用 flexbox */
            justify-content: flex-end; /* 右对齐 */
            align-items: center; /* 垂直居中 */
            gap: 20px; /* 元素间距 */
            padding-right: 15px; /* 右侧内边距 */
        }
        .total-price span {
            margin-left: 10px;
            color: #28a745;
        }
        /* Style for buttons in total-price section */
        .total-price .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.2s ease;
            margin-left: 10px; /* Add some margin between buttons */
        }
        .total-price .btn-warning {
            background-color: #ffc107; /* 警告色 */
            color: #333;
        }
        .total-price .btn-warning:hover {
            background-color: #e0a800; /* 深一点的警告色 */
        }
        .total-price .btn-primary {
            background-color: #007bff; /* 主要色 */
            color: #fff;
        }
        .total-price .btn-primary:hover {
            background-color: #0056b3; /* 深一点的主要色 */
        }

        /* Container for the whole page */
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 15px;
        }

        /* Page header styles */
        .page-header {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px 0;
            border-bottom: 2px solid #007bff;
        }

        .page-title {
            font-size: 2.8em;
            color: #2c3e50;
            font-weight: bold;
            letter-spacing: 1px;
            margin: 0;
        }

        /* No results message */
        .no-results-message {
            text-align: center;
            padding: 50px 0;
            font-size: 1.5em;
            color: #777;
            background-color: #f8f9fa;
            border-radius: 8px;
            margin-top: 30px;
        }

        /* Alerts for success/error messages */
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
            text-align: center;
        }

        .alert-success {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6;
        }

        .alert-danger {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }
    </style>
</head>
<body>
<div th:replace="fragments/header :: header"></div>
<div class="container">
    <div class="page-header">
        <h1 class="page-title">我的购物车</h1>
    </div>

    <div th:if="${message}" class="alert alert-success">
        <p th:text="${message}"></p>
    </div>
    <div th:if="${error}" class="alert alert-danger">
        <p th:text="${error}"></p>
    </div>

    <div th:if="${cartItems != null and !cartItems.isEmpty()}" class="cart-items">
        <div class="cart-item-card" th:each="course : ${cartItems}"
             th:data-course-id="${course.id}" th:data-course-price="${course.couPrice}">
            <h3 th:text="${course.couName}">课程名称</h3>
            <p>价格: <span class="course-price" th:text="${course.couPrice}"></span> 积分</p>
            <p th:text="${course.couIntroduction ?: '暂无课程介绍'}"></p>
            <form th:action="@{'/student/cart/remove/' + ${course.id}}" method="post">
                <button type="submit" class="btn btn-danger">移除</button>
            </form>
        </div>
    </div>
    <div th:unless="${cartItems != null and !cartItems.isEmpty()}" class="no-results-message">
        <p>您的购物车是空的。</p>
    </div>

    <div th:if="${cartItems != null and !cartItems.isEmpty()}" class="total-price">
        <span>总价: <span id="client-total-points">0</span> 积分</span>
        <form th:action="@{/student/cart/clear}" method="post" style="display: inline;">
            <button type="submit" class="btn btn-warning">清空购物车</button>
        </form>
        <button type="button" class="btn btn-primary" id="checkout-btn">结算</button>
    </div>
</div>

<div th:replace="fragments/footer :: footer"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
    // 计算并显示总积分
    function calculateAndDisplayTotalPrice() {
        let totalPoints = 0;
        // 遍历所有购物车项目卡片
        $('.cart-item-card').each(function() {
            // 从 data-course-price 属性中获取价格
            const price = parseFloat($(this).data('course-price'));
            if (!isNaN(price)) {
                totalPoints += price;
            }
        });
        // 更新显示总积分的元素
        $('#client-total-points').text(totalPoints.toFixed(0)); // 确保显示整数
    }

    $(document).ready(function() {
        // 页面加载完成后立即计算并显示总积分
        calculateAndDisplayTotalPrice();

        // 结算按钮点击事件
        $('#checkout-btn').on('click', function() {
            const courseIds = [];
            // 收集所有购物车项目的ID
            $('.cart-item-card').each(function() {
                const courseId = $(this).data('course-id');
                if (courseId) {
                    courseIds.push(courseId);
                }
            });

            if (courseIds.length === 0) {
                alert('购物车为空，无法结算！');
                return;
            }

            // 发送 AJAX POST 请求
            $.ajax({
                url: '/student/cart/purchase/cart', // 这里是 /student/cart/purchase/cart
                type: 'POST',
                contentType: 'application/json', // 告诉服务器我们发送的是 JSON 数据
                data: JSON.stringify(courseIds), // 将课程ID数组转换为 JSON 字符串
                success: function(response) {
                    // response 会是后端返回的 JSON 对象 (e.g., {"status":"success", "message":"..."})
                    // 确保后端返回的是 JSON 格式的响应，否则需要try-catch解析
                    try {
                        const res = typeof response === 'string' ? JSON.parse(response) : response;
                        if (res.status === 'success') {
                            alert(res.message);
                            // 结算成功后，通常需要刷新购物车页面或者重定向到订单成功页面
                            window.location.href = '/student/cart'; // 刷新购物车页面以显示清空后的状态
                        } else {
                            alert('结算失败：' + res.message);
                        }
                    } catch (e) {
                        alert('结算成功，但解析服务器响应失败。');
                        console.error('Error parsing response:', response, e);
                        window.location.href = '/student/cart'; // 尝试刷新页面
                    }
                },
                error: function(xhr, status, error) {
                    // 结算失败处理
                    let errorMessage = '结算失败！';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage += '\n原因: ' + xhr.responseJSON.message;
                    } else if (xhr.responseText) {
                        try {
                            // 尝试解析后端返回的原始文本为 JSON，以获取更详细的错误信息
                            const errorObj = JSON.parse(xhr.responseText);
                            if (errorObj.message) { // 检查是否有自定义错误消息字段
                                errorMessage += '\n原因: ' + errorObj.message;
                            } else {
                                errorMessage += '\n错误详情: ' + xhr.responseText; // 如果没有，显示原始文本
                            }
                        } catch (e) {
                            errorMessage += '\n错误详情: ' + xhr.responseText; // 如果不是JSON，直接显示原始文本
                        }
                    } else {
                        errorMessage += '\n错误详情: ' + error;
                    }
                    alert(errorMessage);
                    console.error('结算错误:', xhr.responseText, status, error);
                }
            });
        });

        // 如果“移除”和“清空购物车”按钮也是通过AJAX处理且不刷新页面，
        // 则在它们成功回调后，需要调用 calculateAndDisplayTotalPrice() 来更新总价。
        // 但根据您目前的HTML，它们是传统表单提交，会刷新页面，所以页面加载时会重新计算。
    });
</script>
</body>
</html>